有昨天的 viewport 設定，網頁可以適應裝置寬度。但還需要針對不同的螢幕尺寸，提供不同的樣式。這就是 Media Queries 媒體查詢的用武之地。

Media Queries 允許在特定的條件下（如螢幕寬度小於某個值），套用特定的 CSS 樣式。

CSS

@media (max-width: 768px) {
  /* 當螢幕寬度小於或等於 768px 時，套用這裡的樣式 */
  body {
    font-size: 14px;
  }
  .main-nav ul {
    flex-direction: column; /* 將導覽列垂直排列 */
  }
}

這個範例的意思是，當螢幕寬度小於等於 768 像素時，文字大小會變小，導覽列會變成垂直排列。可以根據自己的設計，為手機、平板、電腦等裝置分別撰寫樣式。

讓作品集頁面的導覽列和文字加上媒體查詢。
在 style.css 的最下方加入：

CSS

@media (max-width: 600px) {
  .main-nav li {
    display: block; /* 讓連結獨佔一行 */
  }
  .main-nav li a {
    text-align: center;
  }
  p {
    font-size: 16px;
  }
}

現在當瀏覽器寬度縮小到 600px 以下時，導覽列會變成垂直的，文字大小也會改變。這是一個非常實用的 RWD 技巧。

執行成果 :